<!DOCTYPE html>
<html>
<head>
    <title>Diffraction Grating Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="450" style="border:1px solid #d3d3d3;"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Clear canvas with a white background
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // --- Drawing styles ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        
        /**
         * Helper function to draw an arrow from a starting point to an ending point.
         * @param {CanvasRenderingContext2D} context - The canvas rendering context.
         * @param {number} fromx - The x-coordinate of the starting point.
         * @param {number} fromy - The y-coordinate of the starting point.
         * @param {number} tox - The x-coordinate of the ending point.
         * @param {number} toy - The y-coordinate of the ending point.
         */
        function drawArrow(context, fromx, fromy, tox, toy) {
            const headlen = 10; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            context.beginPath();
            context.moveTo(fromx, fromy);
            context.lineTo(tox, toy);
            context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            context.moveTo(tox, toy);
            context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            context.stroke();
        }

        // --- Define coordinates and parameters ---
        const gx = 270; // Grating x-position
        const y1 = 200; // Incident ray 1 y-position
        const y2 = 220; // Incident ray 2 y-position

        // --- Draw Incident Beam ---
        ctx.font = '22px Times New Roman';
        drawArrow(ctx, 50, y1, gx, y1);
        drawArrow(ctx, 50, y2, gx, y2);
        ctx.fillText("λ\u2080", 150, 195);

        // --- Draw Diffraction Grating (DG) ---
        ctx.fillStyle = '#999999'; // Gray color for the grating
        ctx.fillRect(gx - 5, 120, 10, 210);
        ctx.fillStyle = 'black'; // Reset fillStyle
        ctx.font = '24px Times New Roman';
        ctx.fillText("DG", 220, 350);

        // --- Draw Velocity Vector ---
        ctx.lineWidth = 2;
        drawArrow(ctx, gx, 120, gx, 80); // Main velocity arrow
        ctx.font = 'italic bold 24px Times New Roman';
        ctx.fillText("v", 240, 100);
        // Draw the vector symbol (arrow) over 'v'
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(242, 88);
        ctx.lineTo(255, 88);
        ctx.moveTo(251, 85);
        ctx.lineTo(255, 88);
        ctx.lineTo(251, 91);
        ctx.stroke();
        ctx.lineWidth = 1.5; // Reset line width

        // --- Draw Diffracted Beams ---
        const P1 = { x: gx, y: y1 };
        const P2 = { x: gx, y: y2 };
        
        const angle1_deg = 20;
        const angle2_deg = 38;
        const tan1 = Math.tan(angle1_deg * Math.PI / 180);
        const tan2 = Math.tan(angle2_deg * Math.PI / 180);

        const x_end0 = 570, x_end1 = 540, x_end2 = 500;
        const dx1 = x_end1 - gx;
        const dx2 = x_end2 - gx;

        // Rays from P1
        drawArrow(ctx, P1.x, P1.y, x_end0, P1.y); // Order 0
        drawArrow(ctx, P1.x, P1.y, x_end1, P1.y - dx1 * tan1); // Order +1
        drawArrow(ctx, P1.x, P1.y, x_end2, P1.y - dx2 * tan2); // Order +2
        drawArrow(ctx, P1.x, P1.y, x_end1, P1.y + dx1 * tan1); // Order -1
        drawArrow(ctx, P1.x, P1.y, x_end2, P1.y + dx2 * tan2); // Order -2
        
        // Rays from P2
        drawArrow(ctx, P2.x, P2.y, x_end0, P2.y); // Order 0
        drawArrow(ctx, P2.x, P2.y, x_end1, P2.y - dx1 * tan1); // Order +1
        drawArrow(ctx, P2.x, P2.y, x_end2, P2.y - dx2 * tan2); // Order +2
        drawArrow(ctx, P2.x, P2.y, x_end1, P2.y + dx1 * tan1); // Order -1
        drawArrow(ctx, P2.x, P2.y, x_end2, P2.y + dx2 * tan2); // Order -2

        // --- Draw Order Labels ---
        ctx.font = '22px Times New Roman';
        ctx.fillText("+2", 510, 45);
        ctx.fillText("+1", 550, 115);
        ctx.fillText("-1", 550, 325);
        ctx.fillText("-2", 510, 400);

    </script>
</body>
</html>